<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>React Router</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../../../libs/prop-types/15.6.0/prop-types.js"></script>
    <script src="../../../libs/react/16.2.0/umd/react.development.js"></script>
    <script src="../../../libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
    <script src="../../../libs/react-router-dom/4.2.2/react-router-dom.js"></script>
    <script src="../../../libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="../../../libs/classnames/2.2.5/index.js"></script>
    <script type="text/babel" src="./myCommon.js"></script>

    <script type="text/babel" src="./TabNav.js"></script>
    <script type="text/babel" src="./TabPane.js"></script>
    <script type="text/babel" src="./TabContent.js"></script>
    <script type="text/babel" src="./Tabs.js"></script>

    <!--
    -->
</head>

<body>
    <div id='root'></div>
</body>
<script type="text/babel">

    class App extends Component {
        constructor(props) {
            super(props);

            this.handleChange = this.handleChange.bind(this);

            this.state = {
                activeIndex: 0,
            };
        }

        handleChange(e) {
            console.log(parseInt(e.target.value, 10));
            this.setState({
                activeIndex: parseInt(e.target.value, 10),
            });
        }

        render() {
            // 这里切换 select 中的选项是没有作用的，因为使用的是 defaultActiveIndex，
            // 如果想要作用的话，要把 defaultActiveIndex 改成 activeIndex 就可以
            return (
                <div>
                    <div className="operator">
                        <span>切换 Tab：</span>
                        <select value={this.state.activeIndex} onChange={this.handleChange}>
                            <option value="0">Tab 1</option>
                            <option value="1">Tab 2</option>
                            <option value="2">Tab 3</option>
                        </select>
                    </div>

                    <Tabs activeIndex={this.state.activeIndex} className="tabs-bar">
                        <TabPane order="0" tab={'Tab 1'}>第一个 Tab 里的内容</TabPane>
                        <TabPane order="1" tab={'Tab 2'}>第二个 Tab 里的内容</TabPane>
                        <TabPane order="2" tab={'Tab 3'}>第三个 Tab 里的内容</TabPane>
                    </Tabs>

                </div>
            );
        }
    }

    ReactDOM.render(<App />, document.getElementById('root'));


</script>

</html>